<template>
  <el-drawer
    v-model="visible"
    :show-close="true"
    direction="btt"
    :modal="true"
    :destroy-on-close="true"
    class="wave-drawer"
    :with-header="false"
    modal-class="semi-transparent-modal"
    :size="270"
  >
    <WaveBox
      :product-key="form.productKey"
      :device-no="form.deviceNo"
      :sampletime="form.sampletime"
      :deviceOptions="deviceOptions"
      :isRealtime="false"
      :showParamsArea="false"
      :index="0"
      @on-remove="onRemove"
    />
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, toRaw, watch } from "vue";
import WaveBox from './wavebox.vue'

const props = defineProps({
  visible:Boolean,
  productKey: { //产品key
    type: String,
    required: false,
    default: "",
  },
  deviceOptions: { //设备表单选项
    type: Array,
    required: false,
    default: [],
  },
  deviceNo:{   //默认选中的deviceNo
    type: String,
    required: false,
    default: "",
  },
  sampletime:{
    type: Number,
    required: false,
    default: 0,
  },
})

const emit = defineEmits(['update:visible', 'onRemove'])

const visible = ref(props.visible)
const form = reactive({
  productKey: props.productKey,  //产品键
  deviceNo: "",  //设备编号
  type:"ae",   //波形类型 ae  vi
  domain: 0,  // 0时域 1频域
  direction: 0, //方向 0x，1y，2z
  pageFlag:0,   //0当前页 1下一页 -1上一页
  sampletime: 0,  //采样时间
})
const deviceOptions = ref(props.deviceOptions)

const onRemove = (value: any) => {
  visible.value = false
  emit("onRemove", value)
}

watch(() => props.visible, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:visible', val)
})

watch(
  () => props,
  (newParams) => {
    console.log(toRaw(newParams))
    form.productKey = newParams.productKey
    deviceOptions.value = newParams.deviceOptions
    form.deviceNo = newParams.deviceNo
    form.sampletime = newParams.sampletime
  },
  { immediate: true,deep: true },
);
</script>
<style lang="scss" scoped>
.wave-drawer {
  padding: 0; /* 移除顶部内边距 */
}

// 添加半透明背景样式
.semi-transparent-modal {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.wave-container {
  height: 100%;
  //display: flex;
  //flex-direction: column;
}
</style>
